<template>
  <!--   :url="`/src/pages/goods_detail/main.vue?goods_id=${item.goods_id}`"   ***main 后面！！不能加vue   路径也错了！！泵加src！！ -->
  <navigator
    :url="`/pages/goods_detail/main?goods_id=${item.goods_id}`"
    hover-class="none"
    class="goods_item"
  >
    <image
      class="goods image"
      :src="item.goods_small_logo || '/static/empty.png'"
      mode="aspectFill"
    />
    <view class="goods_info">
      <view class="goods_text">{{ item.goods_name }} </view>
      <view class="goods_price">{{ item.goods_price }}</view>
    </view>
    <!-- 尝试放置插槽 -->
    <slot />
  </navigator>
</template>

<script>
import { object } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.goods_item {
  display: flex;
  // width: 700rpx;
  padding: 25rpx;
  // height: 209rpx;   //不应该设置高度哦！！！！要不然价格就掉出去了！！
  .image {
    width: 190rpx;
    height: 190rpx;
    // margin-right: 30rpx;
    background-color: skyblue;
  }

  .goods_info {
    margin: 0 32rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .goods_text {
      font-size: 28rpx;
      // width: 465rpx;
      // height: 66rpx;
      color: #616161;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .goods_price {
      font-size: 28rpx;
      color: #dd001b;
      &::before {
        content: "￥";
        color: #dd001b;
        font-size: 80%;
        margin-right: 4rpx;
      }
    }
  }
}
</style>